<template>
  <view class="p-12 grid grid-cols-2 gap-20">
    <view v-for="item in dataList" :key="item.id">
      <view class="relative pt-12 px-8 border border-solid border-gray-200 rounded-md" @click="toDetail(item.id)">
        <image class="w-full h-210" :src="item.thumbnail?.file_url" mode="aspectFill" />
        <view
          class="absolute bottom-[-2px] left-[-2px] w-[102%] py-12"
          style="background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)"
        >
          <view class="flex justify-center items-center">
            <view class="primary_btn px-26 py-4 rounded-full">下载</view>
          </view>
          <view class="flex justify-center items-center mt-10">
            <image class="w-20 h-20 rounded-full" :src="item.lawyer?.photo" mode="aspectFill" />
            <view class="ml-4 text-gray-600 text-xs">{{ item.lawyer?.name }}</view>
          </view>
        </view>
      </view>
      <view class="text-base font-bold line-clamp-1">{{ item.title }}</view>
      <view class="flex justify-between items-center mt-6">
        <view class="text-blue-600 text-xs">#{{ item.category?.name }}</view>
        <view class="text-gray-500 text-xs">下载3次</view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});

function toDetail(id) {
  uni.navigateTo({
    url: `/pages/contract/template/detail?id=${id}`,
  });
}
</script>
